<template>
	<view class="app l_pages">
		<jnavbar :PageId="20" :title="integralBalance.balance_text + '明细'"></jnavbar>
		
			<view class="banner">
				<vimage class="image" mode="widthFix" imgtype="1" src="static/images/balance_bg.png"></vimage>
				<view class="banner_content">
					<view>
						<text>总资产(元)</text>
						<text></text>
					</view>

					<text>{{ UserInfo.total }}</text>
				</view>
				
			</view>
			<view class="withdraw">
				<view class="uni-flex-row">
					<text>可用余额(元)</text>
					<text>{{ UserInfo.total }}</text>
				</view>
				<view v-if="integralBalance.withdraw" @click="towithdraw" class="withdraw_btns">提现</view>
				<view v-if="UserInfo.balance_switch"  @click="toassettransfer" class="withdraw_btns">转赠</view>
			</view>
			<scroll-view @scrolltolower="getlist" class="page_container" scroll-y>
				<u-gap height="20"></u-gap>
			<view class="list">
				<view class="item uni-flex-row uni-flex-title" v-for="(item, i) in list" :key="i">
					<view class="uni-flex-row uni-flex-title">
						<!-- <image></image> -->
						<view class="icon_box" v-bind:class="item.type == 1 ? 'jian' : 'add'">
							<text v-bind:class="item.type == 1 ? 'el-sc-jian' : 'el-sc-add'"></text>
						</view>
						<view class="uni-flex-column content">
							<text>{{ item.source }}</text>
							<text>{{ item.create_time }}</text>
						</view>
					</view>
					<text class="num" v-bind:class="item.type == 1 ? 'jian' : ''">{{ typelist[item.type].value }}{{ item.money }}</text>
				</view>
			</view>
			<guesslike ref="guesslike" page_id='4'></guesslike>
		</scroll-view>
		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<tab-bar ref="tabbar" :PageId="20"></tab-bar>
		<floatmenu page_id="7"></floatmenu>
		
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			page: 1,
			size: 10,
			list: [],
			typelist: [
				{
					type: 0,
					value: '+'
				},
				{
					type: 1,
					value: '-'
				},
				{
					type: 2,
					value: '变更'
				}
			],
			sourcelist: [
				{
					type: 0,
					value: '消费'
				},
				{
					type: 1,
					value: '充值'
				},
				{
					type: 2,
					value: '提现'
				},
				{
					type: 3,
					value: '分销提现至余额'
				},
				{
					type: 4,
					value: '商户提现至余额'
				},
				{
					type: 5,
					value: '后台变更'
				},
				{
					type: 6,
					value: '退款'
				}
			],
			integralBalance:{}
		};
	},
	async onLoad() {
		await this.$getWx
		let _this=this
		this.getjuris("integralBalance").then(a=>{
			_this.integralBalance=a
		})

	},
	onShow() {
		this.getlist();
		var _this = this;
		this.userCenter()
		// this.$nextTick(a => {
		// 	_this.$refs.tabbar.gettabs();
		// });
	},
	computed: {
		...mapState({
			hastabbar: state => state.hastabbar,
			UserInfo: state => state.userInfo,
		})
	},
	onPullDownRefresh() {
		this.userCenter()
	
	},
	methods: {
		onpull(){
			this.list = [];
			this.page = 1;
			this.getlist();
		},
		userCenter() {
			let params = {};
			this.$http('/user/UserCenter', params, 'GET').then(res => {
				uni.stopPullDownRefresh()
				let centerinfo = res.data.msg;
				let myUserInfo = Object.assign({}, this.UserInfo, centerinfo);
				this.$store.commit('setUserInfo', myUserInfo);
			});
		},
		logincallback() {},
		towithdraw() {
			this.Jumpurl({
				link: 'withdraw',
				login_type: 2,
				type: 1
			});
		},
		toassettransfer(){
			this.Jumpurl({
				link: '/applicationpage/assettransfer/user?type=0',
				login_type: 2,
				type: 1
			});
		},
		initlist() {
			this.list = [];
			this.page = 1;
			this.getlist();
		},
		getlist() {
			this.changeloading({loading: true});
			this.$http('/user/withdraw/list?page=' + this.page + '&size=' + this.size, {}, 'POST').then(res => {
				
				this.changeloading({loading: false});
				if (res.statusCode == 200) {
					let list = res.data.msg.data;
					if (list.length > 0) {
						this.list = this.list.concat(list);
						this.page++;
					} else {
						// uni.showToast({
						// 	title: '暂无更多',
						// 	icon: 'none'
						// });
						this.$refs.guesslike.init()
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.page_container{
		position: relative;
	}
.list {
	// padding-top: 313rpx;
	.item {
		background: #fff;
		width: 720rpx;
		margin-left: 15rpx;
		padding: 0 30rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		height: 138rpx;
		.icon_box {
			width: 78rpx;
			height: 78rpx;
			background-color:#19be6b ;
			margin-right: 23rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 78rpx;
			text{
				color: #FFFFFF;
				font-size: 30rpx;
			}
			&.add{
				background-color: #ff3c29;
			}
		}
		.content {
			height: 78rpx;
			justify-content: space-between;
			text:first-child {
				font-size: 30rpx;
				color: #000000;
			}
			text:last-child {
				font-size: 24rpx;
				color: #999999;
			}
		}
		.num {
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			&.jian {
				color: #19be6b;
			}
		}
	}
}
.banner {
	width: 750rpx;
	height: 384rpx;
	background: #ff3c29;
	border-radius: 4rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	position: relative;
	// top: 0;
	// z-index: 10;
	.image {
		width: 100%;
		position: absolute;
		z-index: 2;
	}
	.banner_content {
		position: relative;
		z-index: 2;
		width: 100%;
		> view {
			margin-left: 40rpx;
			margin-top: 100rpx;
			text:first-child {
				font-size: 24rpx;
				font-weight: 400;
				color: #ffffff;
				opacity: 0.6;
			}
		}
		> text {
			margin-top: 20rpx;
			margin-left: 40rpx;
			font-size: 66rpx;
			font-weight: bold;
			color: #ffffff;
			line-height: 1;
			display: block;
		}
	}
	// margin: 0 24rpx;
}

.withdraw {
	// position: absolute;
	// top: ;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 750rpx;
	height: 120rpx;
	background: #ffffff;
	padding: 0 40rpx;
	// margin-bottom: 20rpx;
	// z-index: 10;
	> view {
		text:first-child {
			font-size: 28rpx;

			color: #707070;
			margin-right: 17rpx;
		}
		text:last-child {
			font-size: 40rpx;

			color: #333333;
		}
	}
}
.withdraw_btns {
	width: 112rpx;
	height: 50rpx;
	background: #fb4939;
	border-radius: 25rpx;
	display: block;
	font-size: 28rpx;
	text-align: center;
	line-height: 50rpx;
	color: #ffffff;
}
</style>
